<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2021/4/6
  Time: 17:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>加减运算</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/boot/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/boot/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/boot/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/boot/js/Chart.js"></script>
</head>
<body style="background-color: #e8f6f6">
<div class="row col-sm-offset-2 col-sm-8">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>题目号</th>
            <th>题目</th>
            <th>答案</th>
        </tr>
        </thead>
        <tbody id="AScontent">
        </tbody>
    </table>
    <div align="center">
        <button type="button" class="btn btn-primary" id="ASbtn">查看题目</button>
        <button type="button" class="btn btn-primary" id="Commitbtn"  style="display: none">提交题目</button>
        <button type="button" class="btn btn-primary" id="ShowChart"  style="display: none">图表展示</button>
    </div>
    <div style="display: none" id="ASChart">
       <canvas id="myChart" style="width: 200px;height: 200px"></canvas>
    </div>
</div>
<script>
    window.onload=function () {
        $('#ASbtn').click(function () {
            $('#ASbtn').hide();
            $('#Commitbtn').show();
            $('#ShowChart').show();
            $.post({
                url:"${pageContext.request.contextPath}/question/asQuestion",
                dataType:'json',
                data:undefined,
                success:function (data) {
                    var right=0;
                    var html="";
                    for (let i = 0; i < data.length; i++) {
                        var id='ASanswer'+i;
                        console.log(id);
                        html=html+"<tr>"+
                            "<td>"+data[i].id+"</td>"+
                            "<td>"+data[i].content+"</td>"+
                            "<td>"+"<input type='text' id='"+id+"' value=''>"+"</td>"
                            +"</tr>"
                    }
                    $('#AScontent').html(html);
                    $('#Commitbtn').click(function () { //启动提交按钮的监听,如果提交题目检查它的正确性,然后显示出来
                        for (let i = 0; i < data.length; i++) {
                           //获取输入框中的答案
                           let ASinput = document.getElementById("ASanswer"+i);
                           let userAnswer = ASinput.value;
                           if(userAnswer==data[i].result){
                               right++;
                               ASinput.style.backgroundColor='#66a9d9';
                           }else{
                               userAnswer=userAnswer+"   正确答案是:"+data[i].result;
                               ASinput.style.backgroundColor='#f61717';
                               ASinput.value=userAnswer;
                           }
                        }
                        alert("您做的题目总数为50,正确的数目为"+right+"错误的数目为"+(50-right)+"正确率为"+(2*right)+"%");
                        $('#ShowChart').click(function () {  //点击进入图表
                            var ctx = document.getElementById("myChart").getContext('2d');
                            var myChart = new Chart(ctx, {
                                type: 'pie',
                                data: {
                                    labels: ["正确", "错误"],
                                    datasets: [{
                                        label: '做题情况显示',
                                        data: [right, 50-right],
                                        backgroundColor: [
                                            'rgba(255, 99, 132, 0.2)',
                                            'rgba(54, 162, 235, 0.2)',
                                            'rgba(255, 206, 86, 0.2)',
                                            'rgba(75, 192, 192, 0.2)',
                                            'rgba(153, 102, 255, 0.2)',
                                            'rgba(255, 159, 64, 0.2)'
                                        ],
                                        borderColor: [
                                            'rgba(255,99,132,1)',
                                            'rgba(54, 162, 235, 1)',
                                            'rgba(255, 206, 86, 1)',
                                            'rgba(75, 192, 192, 1)',
                                            'rgba(153, 102, 255, 1)',
                                            'rgba(255, 159, 64, 1)'
                                        ],
                                        borderWidth: 1
                                    }]
                                }
                            });
                            $('#ASChart').show();
                            right=0;
                        })
                    })

                 }
                }
            )
        })
    }
</script>
</body>
</html>
